<template>
	<view class="content">
		<!--房间列表-->
		<view class="content_1">
			<block v-for="(item_room, index_room) in roomList" :key='index_room'>
				<view class="room_list">
					<view class="room_listleft">
						<view class="room_num">{{item_room.show_name}}</view>
						<view class="room_detail">
							<view class="room_state" style="border: 2upx solid #B3E9DC; color: #B3E9DC;" v-if="item_room.status == 1">空房</view>
							
							<view class="room_state_view" v-if="item_room.status != 1">
								<view class="room_state" style="margin-right: 50upx; border: 2upx solid #999999; color: #999999;">
									{{item_room.show_status.msg}}
								</view>
								<view class="room_rentername">
									租客 {{item_room.user_info.user_name}}
								</view>
							</view>
							<view class="room_time">本月缴费时间：{{item_room.day}}</view>
							<view class="room_time">上月缴费时间：{{item_room.pay_roomtime}}</view>
						</view>
					</view>
					<view class="room_listright" @click="delRoom(index_room)">删除</view>
				</view>
			</block>
		</view>
		<!--创建房间-->
		<view class="content_2" @click="toNewroom">
			创建房间
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../../../../utils/request.js';
	//定义getApp对象
	const app = getApp();
	let seach_number = 10
	let page = 10
	export default {
		data() {
			return {
				roomstate: '2',
				house_id: '',
				roomList: [],
			}
		},
		methods: {
			//跳转创建房间
			toNewroom: function() {
				uni.navigateTo({
					url: '/pages/mine/owner/manage/roomupdate/newroom?house_id=' + this.house_id
				})
			},
			//删除房间
			delRoom: function(index) {
				new Request('landboos/Del_Room/DelRoom').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							openid: app.globalData.openid,
							room_id: this.roomList[index].room_id
						}
					},
					(res) => {
						if (res.data.code == '-1') {
							uni.showToast({
								title: '房间已经有租客在了，不可删除',
								icon: 'none',
								position: 'center'
							})
						} else if (res.data.code == '0') {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								position: 'center'
							})
						} else if (res.data.code == '-2') {
							uni.showToast({
								title: '房间不存在',
								icon: 'none',
								position: 'center'
							})
						} else {
							uni.navigateBack({
								delta: 1,
								success: (res) => {
									uni.showToast({
										title: '删除成功',
										icon: 'none',
										position: 'center'
									})
								}
							})
						}
					}
				)
			},
			//上拉加载(筛选前)
			loadMore: function() {
				new Request('landboos/room/Get_Appoint_Room/GetAppointRoom').request(
					() => {
						return 'POST'
					},
					() => {
						return {
							seach_number: seach_number,
							page: page,
							house_id: this.house_id,
							openid: app.globalData.openid,
							search_type: 'house_id'
						}
					},
					(res) => {
						if (res.data.code == 0) {
							new Request().showToast(res.data.msg);
							return;
						} else {
							page += seach_number
							this.roomList = this.roomList.concat(res.data.data)
							console.log(this.roomList)
						}
					}
				)
			},
		},
		//上拉加载,调用loadMore
		onReachBottom() {
			var that = this
			setTimeout(function() {
				that.loadMore()
			}, 300);
		},
		onLoad(option) {
			// console.log(option.house_id)
			this.house_id = option.house_id
			seach_number = 10
			page = 10
			//获取指定房源房间列表
			new Request('landboos/room/Get_Appoint_Room/GetAppointRoom').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						openid: app.globalData.openid,
						seach_number: seach_number,
						page: 0,
						house_id: this.house_id,
						search_type: 'house_id',
					}
				},
				(res) => {
					if (res.data.code == 0) {
						new Request().showToast(res.data.msg);
						return;
					}
					this.roomList = res.data.data;
				}
			)
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.content {
		padding-bottom: 190upx;
	}

	/*
		房间列表样式
	*/
	.content_1 {
		margin: 0 20upx;
		margin-top: 40upx;
	}

	.room_list {
		height: 180upx;
		display: flex;
		align-items: center;
		margin-bottom: 40upx;
	}

	.room_listleft {
		height: 180upx;
		width: 630upx;
		background-color: #FFFFFF;
		border-top-left-radius: 10upx;
		border-bottom-left-radius: 10upx;
		display: flex;
		align-items: center;
	}

	.room_listright {
		height: 180upx;
		width: 80upx;
		background-color: #FFC26D;
		border-top-right-radius: 10upx;
		border-bottom-right-radius: 10upx;
		line-height: 180upx;
		text-align: center;
		font-size: 24upx;
		color: #FFFFFF;
	}

	.room_num {
		height: 180upx;
		width: 160upx;
		margin-right: 40upx;
		line-height: 180upx;
		text-align: center;
		font-size: 56upx;
		color: #101010;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.room_detail {
		height: 130upx;
		width: 470upx;
		display: flex;
		flex-direction: column;
		padding: 25upx 0upx;
	}

	.room_state_view {
		height: 50upx;
		display: flex;
		align-items: center;
	}

	.room_state {
		width: 120upx;
		height: 50upx;
		line-height: 50upx;
		font-size: 28upx;
		text-align: center;
	}

	.room_rentername {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #101010;
	}

	.room_time {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #101010;
	}

	/*
		创建房间样式
	*/
	.content_2 {
		height: 72upx;
		width: 750upx;
		line-height: 72upx;
		font-size: 28upx;
		color: #FFFFFF;
		text-align: center;
		background-color: #63D0D5;
		position: fixed;
		z-index: 999;
		bottom: 0upx;
		left: 0upx;
	}
</style>
